<template>
	<view class="report-container">
		<view id='head'>
			<h2>个人司法诉讼</h2>
			<h4>姓名：{{name}}</h4>
			<h4>订单编号：{{orderNo}}</h4>
			<h5>有效时间至：{{endTime}}</h5>
		</view>
		<view class="report-section ">
			<view class="title">司法诉讼汇总</view>
			<view class="content">
				<table>
					<tr>
						<th>法院公告</th>
						<th>涉案信息</th>
						<th>案件流程</th>
					</tr>
					<tr>
						<td>{{getAJnum(detail1.civil)}}</td>
						<td>{{getAJnum(detail1.criminal)}}</td>
						<td>{{getAJnum(detail1.administrative)}}</td>
					</tr>
					<tr>
						<th>执行公告</th>
						<th>限制高消费</th>
						<th>曝光台</th>
					</tr>
					<tr>
						<td>{{getAJnum(detail1.implement)}}</td>
						<td>{{getAJnum(detail1.bankrupt)}}</td>
						<td>{{getAJnum(detail1.preservation)}}</td>
					</tr>
				</table>
			</view>
		</view>
		<view class="report-section">
			<view class="title">法院公告{{ detail1.civil.cases ? '' : '（暂无）' }}</view>
			<view class="content">
				<view class="content-item">
					<!-- {{detail1.civil}} -->
					<view v-if="detail1.civil.cases" v-for="(item, index) in detail1.civil.cases" class="bottom">
						<view class="item">
							<view class="left">案号</view>
							<view class="right">{{ item.c_ah }}</view>
						</view>
						<view class="item">
							<view class="left">案件类型</view>
							<view class="right">{{ item.n_ajlx }}</view>
						</view>
						<view class="item">
							<view class="left">法院</view>
							<view class="right">{{ item.n_jbfy }}</view>
						</view>
						<view class="item">
							<view class="left">诉讼身份</view>
							<view class="right">{{ item.n_ssdw }}</view>
						</view>
						<view class="item">
							<view class="left">立案时间</view>
							<view class="right">{{ item.d_larq  }}</view>
						</view>
						<view class="item">
							<view class="left">结案时间</view>
							<view class="right">{{ item.d_jarq}}</view>
						</view>
						<view class="item">
							<view class="left">结案方式</view>
							<view class="right">{{ item.c_ah }}</view>
						</view>
						<view class="item">
							<view class="left">执行标的金额</view>
							<view class="right">{{ item.n_sqzxbdje}}</view>
						</view>
						<view class="item">
							<view class="left">判决结果</view>
							<view class="right">{{ item.n_jafs }}</view>
						</view>
						<view class="page">
							第{{index+1}}条 / 共{{detail1.civil.cases.length}}条
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="report-section">
			<view class="title">涉案信息{{ detail1.criminal.cases? '' : '（暂无）' }}</view>
			<view class="content">
				<view class="content-item">
					<view v-if="detail1.criminal.cases" v-for="(item, index) in detail1.criminal.cases" class="bottom">
						<view class="item">
							<view class="left">案号</view>
							<view class="right">{{ item.c_ah }}</view>
						</view>
						<view class="item">
							<view class="left">案件类型</view>
							<view class="right">{{ item.n_ajlx }}</view>
						</view>
						<view class="item">
							<view class="left">法院</view>
							<view class="right">{{ item.n_jbfy }}</view>
						</view>
						<view class="item">
							<view class="left">诉讼身份</view>
							<view class="right">{{ item.n_ssdw }}</view>
						</view>
						<view class="item">
							<view class="left">立案时间</view>
							<view class="right">{{ item.d_larq  }}</view>
						</view>
						<view class="item">
							<view class="left">结案时间</view>
							<view class="right">{{ item.d_jarq}}</view>
						</view>
						<view class="item">
							<view class="left">结案方式</view>
							<view class="right">{{ item.c_ah }}</view>
						</view>
						<view class="item">
							<view class="left">执行标的金额</view>
							<view class="right">{{ item.n_sqzxbdje}}</view>
						</view>
						<view class="item">
							<view class="left">判决结果</view>
							<view class="right">{{ item.n_jafs }}</view>
						</view>
						<view class="page">
							第{{index+1}}条 / 共{{detail1.criminal.cases.length}}执行
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="report-section ">
			<view class="title">案件流程{{ detail1.administrative.cases? '' : '（暂无）' }}</view>
			<view class="content">
				<view class="content-item">
					<view v-if="'cases' in detail1.administrative" v-for="(item, index) in detail1.administrative.cases"
						class="bottom">
						<view class="item">
							<view class="left">案号</view>
							<view class="right">{{ item.c_ah }}</view>
						</view>
						<view class="item">
							<view class="left">案件类型</view>
							<view class="right">{{ item.n_ajlx }}</view>
						</view>
						<view class="item">
							<view class="left">法院</view>
							<view class="right">{{ item.n_jbfy }}</view>
						</view>
						<view class="item">
							<view class="left">诉讼身份</view>
							<view class="right">{{ item.n_ssdw }}</view>
						</view>
						<view class="item">
							<view class="left">立案时间</view>
							<view class="right">{{ item.d_larq  }}</view>
						</view>
						<view class="item">
							<view class="left">结案时间</view>
							<view class="right">{{ item.d_jarq}}</view>
						</view>
						<view class="item">
							<view class="left">结案方式</view>
							<view class="right">{{ item.c_ah }}</view>
						</view>
						<view class="item">
							<view class="left">执行标的金额</view>
							<view class="right">{{ item.n_sqzxbdje}}</view>
						</view>
						<view class="item">
							<view class="left">判决结果</view>
							<view class="right">{{ item.n_jafs }}</view>
						</view>
						<view class="page">
							第{{index+1}}条 / 共{{detail1.administrative.cases.length}}执行
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="report-section section12">
			<view class="title">执行公告{{ detail1.implement.cases  ? '' : '（暂无）' }}</view>
			<view class="content">
				<view class="content-item">
					<view v-if="'cases' in detail1.implement" v-for="(item, index) in detail1.implement.cases"
						class="bottom">
						<view class="item">
							<view class="left">案号</view>
							<view class="right">{{ item.c_ah }}</view>
						</view>
						<view class="item">
							<view class="left">案件类型</view>
							<view class="right">{{ item.n_ajlx }}</view>
						</view>
						<view class="item">
							<view class="left">法院</view>
							<view class="right">{{ item.n_jbfy }}</view>
						</view>
						<view class="item">
							<view class="left">诉讼身份</view>
							<view class="right">{{ item.n_ssdw }}</view>
						</view>
						<view class="item">
							<view class="left">立案时间</view>
							<view class="right">{{ item.d_larq  }}</view>
						</view>
						<view class="item">
							<view class="left">结案时间</view>
							<view class="right">{{ item.d_jarq}}</view>
						</view>
						<view class="item">
							<view class="left">结案方式</view>
							<view class="right">{{ item.c_ah }}</view>
						</view>
						<view class="item">
							<view class="left">执行标的金额</view>
							<view class="right">{{ item.n_sqzxbdje}}</view>
						</view>
						<view class="item">
							<view class="left">判决结果</view>
							<view class="right">{{ item.n_jafs }}</view>
						</view>
						<view class="page">
							第{{index+1}}条 / 共{{detail1.implement.cases.length}}执行
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="report-section">
			<view class="title">限制高消费{{ detail1.bankrupt.cases ? '' : '（暂无）' }}</view>
			<view class="content">
				<view class="content-item">
					<view v-if="'cases' in detail1.bankrupt" v-for="(item, index) in detail1.bankrupt .cases"
						class="bottom">
						<view class="item">
							<view class="left">案号</view>
							<view class="right">{{ item.c_ah }}</view>
						</view>
						<view class="item">
							<view class="left">案件类型</view>
							<view class="right">{{ item.n_ajlx }}</view>
						</view>
						<view class="item">
							<view class="left">法院</view>
							<view class="right">{{ item.n_jbfy }}</view>
						</view>
						<view class="item">
							<view class="left">诉讼身份</view>
							<view class="right">{{ item.n_ssdw }}</view>
						</view>
						<view class="item">
							<view class="left">立案时间</view>
							<view class="right">{{ item.d_larq  }}</view>
							<view class="right">{{ item.d_larq  }}</view>

						</view>
						<view class="item">
							<view class="left">结案时间</view>
							<view class="right">{{ item.d_jarq}}</view>
						</view>
						<view class="item">
							<view class="left">结案方式</view>
							<view class="right">{{ item.c_ah }}</view>
						</view>
						<view class="item">
							<view class="left">执行标的金额</view>
							<view class="right">{{ item.n_sqzxbdje}}</view>
						</view>
						<view class="item">
							<view class="left">判决结果</view>
							<view class="right">{{ item.n_jafs }}</view>
						</view>
						<view class="page">
							第{{index+1}}条 / 共{{detail1.bankrupt.cases.length}}执行
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="report-section">
			<view class="title">曝光台{{ detail1.preservation.cases ? '' : '（暂无）' }}</view>
			<view class="content">
				<view class="content-item">
					<view v-if="'cases' in detail1.preservation" v-for="(item, index) in detail1.preservation.cases"
						class="bottom">
						<view class="item">
							<view class="left">案号</view>
							<view class="right">{{ item.c_ah }}</view>
						</view>
						<view class="item">
							<view class="left">案件类型</view>
							<view class="right">{{ item.n_ajlx }}</view>
						</view>
						<view class="item">
							<view class="left">法院</view>
							<view class="right">{{ item.n_jbfy }}</view>
						</view>
						<view class="item">
							<view class="left">诉讼身份</view>
							<view class="right">{{ item.n_ssdw }}</view>
						</view>
						<view class="item">
							<view class="left">立案时间</view>
							<view class="right">{{ item.d_larq  }}</view>
						</view>
						<view class="item">
							<view class="left">结案时间</view>
							<view class="right">{{ item.d_jarq}}</view>
						</view>
						<view class="item">
							<view class="left">结案方式</view>
							<view class="right">{{ item.c_ah }}</view>
						</view>
						<view class="item">
							<view class="left">执行标的金额</view>
							<view class="right">{{ item.n_sqzxbdje}}</view>
						</view>
						<view class="item">
							<view class="left">判决结果</view>
							<view class="right">{{ item.n_jafs }}</view>
						</view>
						<view class="page">
							第{{index+1}}条 / 共{{detail1.preservation.cases.length}}执行
						</view>
					</view>
				</view>
			</view>

		</view>
		<h3 id="end">信鸟出品，必属精品</h3>
		<template v-if="orderNo">
			<liu-drag-button @clickBtn="FX()">分享</liu-drag-button>
		</template>
	</view>
</template>
<script>
	import {
		query
	} from '@/api/jinjian.js'

	import {
		judTemInfo
	} from '@/utils/temInfo.js'

	export default {
		data() {
			return {
				orderNo: null,
				name: null,
				endTime: null,

				detail1: {
					civil: {},
					criminal: {},
					administrative: {},
					implement: {},
					bankrupt: {},
					preservation: {}
				}
			}
		},
		onLoad(options) {
			if (options.orderNo) {
				let load = this.$modal.msgLoading('正在查询，请稍后...')
				this.orderNo = options.orderNo
				query(this.orderNo).then(res => {
					load.close()
					if (res.code === 200) {
						let data = res.data
						this.name = data.name
						this.endTime = data.endTime

						let grss = data.grss
						if (grss.retcode == '000000') {
							const retdata = grss.retdata
							if (retdata.detail && retdata.detail[0]) {
								this.detail1 = retdata.detail[0]
							} else {
								this.$modal.msg(retdata.messge)
							}
						} else if (grss.retcode == '4005') {
							this.$modal.msgLoading('系统异常'+grss.retmsg)
						} 
					} else {
						this.endTime = res.endTime
						this.$modal.msgLoading(res.msg)
					}
				})
			} else {
				this.detail1 = judTemInfo
			}
		},
		methods: {
			getAJnum(data) {
				if ('cases' in data) {
					return data.cases.length + '条'
				}
				return '未命中（0条）'
			}
		}
	}
</script>

<style scoped lang="scss">
	.report-container {
		min-height: 100vh;
		background: url("@/static/images/bg.png") no-repeat 0 0, #F5F6FC;
		background-size: contain;
		padding: 15.0px;
		box-sizing: border-box;

		#head {
			color: #fff;
			text-align: center;
			h4 {
				margin: 10px 0;
			}
		}

		.report-section {
			margin-top: 15.0px;
			padding: 8px 0px 8px;

			width: 100%;
			background: url("@/static/images/section-bg.png") no-repeat -14.0px 0;
			background-size: 100% auto;
			background-color: #f0f0f0;

			box-sizing: border-box;
			background-color: #fff;
			border-radius: 8.0px;

			.title {
				margin-left: 8px;
				color: #fff;
				font-weight: bold;
				font-size: 15.0px;
			}

			.content {
				margin-top: 10px;

				table {
					width: 100%;
					background-color: #f6f6f6;
					border-radius: 4px;
					border-collapse: collapse;
					font-size: 12px;
					padding: 2px;
					color: #078dff;

					table th,
					td {
						width: 33%;
						border-bottom: 1px solid black;
						border-color: #EBEEF5;
						text-align: center;
					}

					th {
						padding: 8px 4px;
						background-color: #1d98fe24;
					}

					td {
						padding: 8px 4px;
					}
				}

				.content-item {
					padding: 0 15px;

					.top {
						font-size: 22rpx;
						color: #646469;
					}

					.bottom {
						font-size: 24rpx;
						color: #94949C;

						.item {
							margin-top: 20rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.right {
								color: #3D3D41;
							}
						}

						.page {
							text-align: center;
							margin-bottom: 12px;
							font-size: 22rpx;
						}
					}
				}

			}
		}

		#end {
			text-align: center;
			margin-top: 20px;
			color: #3170ff
		}
	}
</style>